<template>
  <div class="container">
    <div>
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="请选择源数据源" required>
          <el-select v-model="poolNameFrom" placeholder="请选择" @change="handleSelectFrom">
            <el-option v-for="table in dataSourceList" :label="table.poolName" :value="table.poolName" :key="table.poolName"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="请选择目标数据源" required>
          <el-select v-model="poolNameTo" placeholder="请选择" @change="handleSelectTo">
            <el-option v-for="table in dataSourceList" :label="table.poolName" :value="table.poolName" :key="table.poolName"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-tabs v-model="activeName" @tab-click="handleClick" stretch>
        <el-tab-pane label="数据库对比" name="first">
          <el-form :inline="true" :model="databaseCompare" ref="databaseCompare" class="demo-form-inline">
            <el-form-item label="源数据库名称">
              <el-input v-model="databaseCompare.databaseFrom"></el-input>
            </el-form-item>
            <el-form-item label="目标数据库名称">
              <el-input v-model="databaseCompare.databaseTo"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('/sql-compare/databaseCompare',databaseCompare,'databaseCompare')">对比</el-button>
            </el-form-item>
          </el-form>
          <el-table-column label="对比结果" width="300">
            <template>
              <div v-html="databaseCompare.desc" style="height:auto; white-space: pre-wrap; text-align: left; margin: 0 auto;width: 1000px"></div>
            </template>
          </el-table-column>
        </el-tab-pane>

        <el-tab-pane label="表结构对比" name="second">
          <el-form :inline="true" :model="tableCompare" ref="tableCompare" class="demo-form-inline">
            <el-form-item label="源数据库名称">
              <el-input v-model="tableCompare.databaseFrom"></el-input>
            </el-form-item>
            <el-form-item label="源表名称" prop="tableFrom" :rules="[
              { required: true, message: '请输入源表名称', trigger: 'blur' }
            ]">
              <el-input v-model="tableCompare.tableFrom"></el-input>
            </el-form-item>
            <el-form-item label="目标数据库名称">
              <el-input v-model="tableCompare.databaseTo"></el-input>
            </el-form-item>
            <el-form-item label="目标表名称" required>
              <el-input v-model="tableCompare.tableTo"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit('/sql-compare/tableCompare',tableCompare,'tableCompare')">对比</el-button>
            </el-form-item>
          </el-form>
          <el-table-column label="对比结果" width="300">
            <template>
              <div v-html="tableCompare.desc" style="height:auto; white-space: pre-wrap; text-align: left; margin: 0 auto;width: 1000px"></div>
            </template>
          </el-table-column>
        </el-tab-pane>
        <el-tab-pane label="数据库索引对比" name="third">

        </el-tab-pane>
        <el-tab-pane label="表主键内容对比" name="fourth">

        </el-tab-pane>
      </el-tabs>
    </div>
  </div>

</template>

<script>

export default {
  name: "SqlCompare",
  data() {
    return {
      activeName: 'first',
      poolNameFrom:'',
      poolNameTo:'',
      databaseCompare:{
        databaseFrom:'',
        databaseTo:'',
        desc:''
      },
      tableCompare:{
        databaseFrom:'',
        databaseTo:'',
        tableFrom:'',
        tableTo:'',
        desc:''
      },
    };
  },
  props:{
    dataSourceList: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleClick (tab, event) {
    },
    handleSelectFrom(value){
      console.log(this.selectFrom)
      this.$http.get('/datasource/databaseByPoolName',{params:{poolName:value}})
          .then(res => {
            if (res.data.code === 0) {
              this.databaseCompare.databaseFrom = res.data.data
              this.tableCompare.databaseFrom = res.data.data
            }
          }).catch(err => {

          })
    },
    handleSelectTo(value){
      this.$http.get('/datasource/databaseByPoolName',{params:{poolName:value}})
          .then(res => {
            if (res.data.code === 0) {
              this.databaseCompare.databaseTo = res.data.data
              this.tableCompare.databaseTo = res.data.data
            }
          }).catch(err => {

      })
    },
    onSubmit(url,data,ref){
      const newData = {...data, poolNameFrom: this.poolNameFrom, poolNameTo: this.poolNameTo }
      this.$refs[ref].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      this.$http.post(url, newData)
          .then(res => {
            console.log(res.data);
            console.log(res.data.code);
            if (res.data.code === 0) {
              this.$message.success(res.data.message)
              data.desc = res.data.data;
            }else{
              this.$message.error(res.data.message)
            }
          }).catch(err => {

      })

    }

  }

};
</script>

<style scoped>
 span{
   color: darkgray;
 }
</style>